<template>
	<div class="Oticket">
		<div class="top">
			<el-button class="codesm">扫描二维码验票</el-button>
			<div class="inputtext">
				<strong class="fontsize-20px">请输入验证码验票</strong>
				<el-input class="codetext" v-model="codetext" @blur="toCheck" placeholder="请输入内容"></el-input>
			</div>
		</div>
		<div class="bottom">
			<div class="main">
				<div class="row">
					<label-input class="rowli" :LabelInput="odernum"></label-input>
				</div>
				<div class="row">
					<label class="label">客人名单：</label>
					<div class="right-con">
						<div class="con">

								<p v-for="i in infopeople" :label="i.name">{{i.name}}:{{i.card}}</p>
						</div>
					</div>
				</div>
				<div class="row">
					<label class="label">产品信息：</label>
					<div class="right-con">
						<div class="con">
							<p v-for="i in infoinfo">{{i.info_name}}</p>
						</div>
					</div>
				</div>

				<div class="row rowlibox">
					<label-input class="rowli" :LabelInput="oderperson"></label-input>
					<div class="li"></div>
				</div>
				<div class="row rowlibox">
					<label-input class="rowli" :LabelInput="odertime"></label-input>
					<div class="li">

						<el-radio v-model="radio" :label="1">有效</el-radio>
						<el-radio v-model="radio" :label="2">过期</el-radio>
					</div>
				</div>
				<div class="row btn">
					<el-button @click="changeStatus">确定核销</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import api from '../../fetch/api'
	import LabelInput from "../../components/LabelInput.vue";
	export default {
		data() {
			return {
				codetext: "",
				radio: 1,
				checkList: [],
				infopeople:[],
				infoinfo:[],
				odernum: {
					label: "订单号",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false
				},
				oderperson: {
					label: "订单人数",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false
				},
				odertime: {
					label: "下单日期",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false
				}

			}
		},
		computed: {
			...mapGetters([
				'token',
				'res_toCheck'
			]),
		},
		components: {
			LabelInput
		},
		created() {
		},
		mounted() {
		},
		methods: {
			...mapActions({
				getres_toCheck: 'getres_toCheck',
			}),
			toCheck() {
				this.$api.GettoCheck({
						token: this.token,
						qrcode: this.codetext
					})
					.then(res => {
						if (res.code === 200) {
							this.getres_toCheck(res.result)
							this.odernum.name = this.res_toCheck.info.order_id
							this.oderperson.name = this.res_toCheck.info.adult_number + this.res_toCheck.info.children_number;
							this.odertime.name = this.res_toCheck.info.insert_time
							this.radio = this.res_toCheck.lose_status
							this.infopeople=this.res_toCheck.info.people				
							this.infoinfo=this.res_toCheck.info.info				
						} else {
							this.$message({
								showClose: true,
								message: res.meg,
								type: 'warning'
							});
						}
					})
			},
			changeStatus() {
				this.$api.GetchangeStatus({
					token: this.token,
					id:this.res_toCheck.id, //Int 公司ID
					type:this.res_toCheck.type, //Int 2 景区3酒店
					order_id:this.res_toCheck.order_id, //String 订单号
					time:this.res_toCheck.time //String 出行时间
				})
				.then(res=>{
						this.$message({
							showClose: true,
							message: res.meg,
							type: 'success'
						});
				})
			}
		}
	}
</script>

<style lang="less">
	.Oticket {
		padding: 0 10px;
		box-sizing: border-box;

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40px 30px 10px 30px;
			border-bottom: 2px solid #41c7db;
			box-sizing: border-box;

			.codesm {
				width: 270px;
				height: 50px;
				background: #ff6600;
				color: #ffffcc;
				border-radius: 10px;
				font-size: 16px;
			}

			.inputtext {
				display: flex;
				align-items: center;

				strong {
					margin-right: 15px;
				}
			}

			.codetext {
				width: 270px;
				height: 50px;

				.el-input__inner {
					height: 50px;
					border-color: #ff6600;
					border-radius: 0;
					font-weight: bold;
					font-size: 20px;
				}
			}
		}

		.bottom {
			width: 100%;
			padding: 15px 0;
			box-sizing: border-box;
			display: flex;
			justify-content: center;

			.main {
				width: 795px;
				border: 1px solid #8B8B8B;
				padding: 20px 110px 20px 0;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-wrap: wrap;

				.row {
					width: 100%;
					display: flex;
					justify-content: center;

					.rowli {
						width: 100%;
					}

					.label {
						width: 25%;
						text-align: right;
					}

					.right-con {
						width: 65%;
						display: flex;
						flex-wrap: wrap;
						text-align: left;

						.con {
							padding: 10px 20px;
							box-sizing: border-box;
							width: 100%;
							height: 100px;
							border: 1px solid #8B8B8B;
							margin-bottom: 10px;
							border-radius: 5px;
							overflow-y: scroll;

							// 							&::-webkit-scrollbar {
							// 								width: 10px;
							// 								height: 10px;
							// 								background: #999
							// 							}
						}


					}

					.li {
						width: 250px;
						display: flex;
						align-items: center;

					}
				}

				.btn {
					padding-left: 120px;
					padding-top: 50px;
					box-sizing: border-box;

					.el-button {
						width: 365px;
						height: 50px;
						color: #fff;
						background: #41c7db;
						border-radius: 10px;
						font-size: 16px;
						border: 1px solid #8B8B8B;
					}
				}

				.rowlibox {
					padding-left: 80px;
					box-sizing: border-box;
				}
			}

		}
	}
</style>
